<template>
  <div :style="{ padding: '0 0 32px 32px' }">
    <h4 :style="{ marginBottom: '20px' }">{{ title }}</h4>
    <v-chart
      height="254"
      :data="data"
      :scale="scale"
      :forceFit="true"
      :padding="['auto', 'auto', '40', '50']"
    >
      <v-tooltip />
      <v-axis />
      <v-bar position="x*y" />
    </v-chart>
  </div>
</template>

<script>
const tooltip = [
  "x*y",
  (x, y) => ({
    name: x,
    value: y,
  }),
];
const scale = [
  {
    dataKey: "x",
    title: "日期(天)",
    alias: "日期(天)",
    min: 2,
  },
  {
    dataKey: "y",
    title: "流量(Gb)",
    alias: "流量(Gb)",
    min: 1,
  },
];

export default {
  name: "Bar",
  props: {
    title: {
      type: String,
      default: "",
    },
  },
  data() {
    return {
      data: [],
      scale,
      tooltip,
    };
  },
  created() {
    this.getMonthBar();
  },
  methods: {
    getMonthBar() {
      this.$http.get("/analysis/month-bar").then((res) => {
        this.data = res.result;
      });
    },
  },
};
</script>